<template>
  <el-form
    :model="model.formData"
    ref="formRef"
    @submit.prevent
    :rules="formRules"
    label-width="140px"
  >
    <template v-if="isExpert">
      <el-row class="mg-row">
        <el-col :span="24" class="mg-row">
          <div>{{ conclusionList.label }}</div>
        </el-col>

        <el-col
          :xl="16"
          :lg="24"
          v-for="(item, index) in conclusionList.value"
          :key="index"
        >
          <template v-if="item.type === 'select'">
            <el-form-item
              :label="item.label"
              :prop="item.require ? item.value : ''"
            >
              <el-select
                style="width: 100%"
                v-model="model.formData[item.value]"
                clearable
                :placeholder="item.placeholder"
                value-key="dicCode"
              >
                <el-option
                  v-for="item in reviewConclusion"
                  :key="item.dicCode"
                  :label="item.dicValue"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </template>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24" class="mg-row">
          <div>{{ reviewTitle }}</div>
        </el-col>

        <el-col
          :xl="16"
          :lg="24"
          v-for="(item, index) in reviewList"
          :key="index"
        >
          <el-form-item
            :label="item.label"
            :prop="item.require ? item.value : ''"
          >
            <el-input
              :type="item.type"
              :placeholder="item.placeholder"
              v-model="model.formData[item.value]"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col
          :xl="16"
          :lg="24"
          v-for="(item, index) in formList"
          :key="index"
        >
          <template v-if="item.type === 'file'">
            <el-form-item
              :label="item.label"
              :prop="item.require ? item.value : ''"
            >
              <ecm-upload
                :files="model.formData[item.value]"
                :docid="docid"
                @setFile="handleSuccess2"
              ></ecm-upload>
              <!-- <el-upload
                name="uploadFile"
                multiple
                :accept="acceptTypes"
                :action="uploadComUrl"
                :headers="uploadHeaders"
                :on-success="handleSuccess"
                :on-remove="handleRemove"
                :on-error="handleError"
                :file-list="model.formData[item.value]"
                :before-upload="beforeAvatarUpload"
                :on-preview="handlePreview"
              >
                <el-button size="small" type="primary">附件上传</el-button>
                <template #tip>
                  <div class="el-upload__tip">
                    支持上传doc、docx、xls、xlsx、pdf、ppt、pptx、png、jpg、jpeg等格式文件,文件大小不得大于10M。
                  </div>
                </template>
              </el-upload> -->
            </el-form-item>
          </template>
          <el-form-item
            v-else
            :label="item.label"
            :prop="item.require ? item.value : ''"
          >
            <el-input
              :type="item.type"
              :placeholder="item.placeholder"
              v-model="model.formData[item.value]"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </template>

    <!-- 专家汇总 -->
    <template v-else>
      <el-row>
        <el-col
          :xl="16"
          :lg="24"
          v-for="(item, index) in formList"
          :key="index"
        >
          <template v-if="item.type === 'radio'">
            <el-form-item
              :label="item.label"
              :prop="item.require ? item.value : ''"
            >
              <el-radio-group
                v-model="model.formData[item.value]"
                @change="changeRadio"
              >
                <el-radio
                  v-for="obj in item.content"
                  :label="obj.value"
                  :key="obj.value"
                  >{{ obj.name }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
          </template>

          <template v-else-if="item.type === 'file'">
            <el-form-item
              :label="item.label"
              :prop="item.require ? item.value : ''"
              v-if="model.formData.reviewCategoryCode != 2"
            >
              <ecm-upload
                :files="model.formData[item.value]"
                :docid="docid"
                @setFile="handleSuccess"
              ></ecm-upload>
              <!-- <el-upload
                name="uploadFile"
                multiple
                :accept="acceptTypes"
                :action="uploadComUrl"
                :headers="uploadHeaders"
                :on-success="handleSuccess"
                :on-remove="handleRemove"
                :on-error="handleError"
                :file-list="model.formData[item.value]"
                :before-upload="beforeAvatarUpload"
                :on-preview="handlePreview"
              >
                <el-button size="small" type="primary">附件上传</el-button>
                <template #tip>
                  <div class="el-upload__tip">
                    支持上传doc、docx、xls、xlsx、pdf、ppt、pptx、png、jpg、jpeg等格式文件,文件大小不得大于10M。
                  </div>
                </template>
              </el-upload> -->
            </el-form-item>
          </template>

          <template v-else-if="item.type === 'textarea'">
            <el-form-item
              :label="item.label"
              :prop="item.require ? item.value : ''"
            >
              <el-input
                :type="item.type"
                :placeholder="item.placeholder"
                v-model="model.formData[item.value]"
              />
            </el-form-item>
          </template>
        </el-col>
      </el-row>
    </template>
  </el-form>
</template>

<script lang="ts" setup>
import { ref, reactive, watch, defineExpose } from "vue";
import { useRoute } from "vue-router";
import { flowFormArray } from "/@/utils/flowForm";
import { storageLocal } from "/@/utils/storage";
import EcmUpload from "/@/components/ecmUpload/index.vue";
const props = defineProps({
  projectInfo: {
    type: Object,
    default: () => {}
  }
});
const route = useRoute();
let docid = window["ecmDocType"].project;
const formRef = ref<HTMLFormElement | null>(null) as any;
const nodeId = route.query.nodeId ? route.query.nodeId : "ACT_010";
const flowType = route.query.flowType;
const userInfo = storageLocal.getItem("rdms-info");
let projectInfo = ref(null);
const conclusionList = ref([]);
const reviewList = ref([]);
const formList = ref([]);
const isExpert = ref<boolean>(false);
const reviewTitle = ref("");
const reviewConclusion = [
  { dicCode: "1", dicValue: "同意" },
  { dicCode: "2", dicValue: "需重新评议" },
  { dicCode: "3", dicValue: "不同意" }
];
const formRules = ref({
  reviewCommentsCode: [
    { required: true, message: "请选择综合评审结论", trigger: "change" }
  ],
  ecoRational: [{ required: true, message: "请输入", trigger: "blur" }],
  ecoAccurate: [{ required: true, message: "请输入", trigger: "blur" }],
  ecoCompliance: [{ required: true, message: "请输入", trigger: "blur" }],
  tcnInnovation: [{ required: true, message: "请输入", trigger: "blur" }],
  tcnAdvance: [{ required: true, message: "请输入", trigger: "blur" }],
  tcnJbzx: [{ required: true, message: "请输入", trigger: "blur" }],
  reviewComments: [{ required: true, message: "请输入", trigger: "blur" }],
  ext1: [{ required: true, message: "请输入", trigger: "blur" }],
  ext2: [{ required: true, message: "请输入", trigger: "blur" }],
  ext3: [{ required: true, message: "请输入", trigger: "blur" }],
  ext4: [{ required: true, message: "请输入", trigger: "blur" }],
  ext5: [{ required: true, message: "请输入", trigger: "blur" }],
  ext6: [{ required: true, message: "请输入", trigger: "blur" }],
  reviewCategoryCode: [
    { required: true, message: "请选择立项评审意见", trigger: "change" }
  ],
  reviewTemplateAttachment: [
    { required: true, message: "请上传汇总专家评审意见", trigger: "change" }
  ]
});
const radioList = [
  { name: "同意", value: "1" },
  { name: "需重新审议", value: "2" },
  { name: "不同意", value: "3" }
];
const model = reactive({
  flowType: "2001",
  approveHandlerId: null,
  saveLoading: false,
  rejectStep: "reject",
  dialogType: "approval",
  defaultFileList: [],
  reportDefaultFileList: [],
  recordDefaultFileList: [],
  reviewDefaultFileList: [],
  approvalDefaultFileList: [],
  formData: {
    userId: userInfo.userId,
    expertRvwId: "",
    reviewCommentsCode: "" as any,
    reviewCommentsName: "",
    reviewComments: "",
    expertApproveStatus: "1",
    ecoAccurate: "", //符合性
    ecoCompliance: "", //相关性
    ecoRational: "", //经济性
    tcnAdvance: "", //必要性
    tcnInnovation: "", //创新性
    tcnJbzx: "", //创造价值
    ext1: "", //可行性
    ext2: "", //团队能力
    ext3: "", //项目完成情况
    ext4: "", //项目产出
    ext5: "", //成果影响
    ext6: "", //综合管理
    id: "",
    remark: "",
    reviewApproveStatus: "2",
    reviewCategoryCode: "",
    reviewCategoryName: "",
    reviewTemplateAttachment: [],
    reviewTemplateAttachmentArr: [],
    reviewAttachment: []
  },

  formInfo: {
    userId: userInfo.userId,
    expertRvwId: "",
    reviewCommentsCode: "",
    reviewCommentsName: "",
    reviewComments: "",
    expertApproveStatus: "1",
    ecoAccurate: "", //预算准确性
    ecoCompliance: "", //预算合规性
    ecoRational: "", //预算合理性
    tcnAdvance: "", //先进性
    tcnInnovation: "", //创新性
    tcnJbzx: "" //降本增效
  },

  formParmas: {
    id: "",
    remark: "",
    reviewApproveStatus: "2",
    reviewCategoryCode: "",
    reviewCategoryName: "",
    reviewTemplateAttachmentArr: []
  }
});
const validate = async () => {
  const isValid = await new Promise(resolve => formRef.value.validate(resolve));
  return isValid;
};

const handleSuccess = res => {
  model.formData.reviewTemplateAttachment = res.file;
  model.formData.reviewTemplateAttachmentArr = res.file;
  formRef.value.clearValidate("reviewTemplateAttachment");
};

const handleSuccess2 = res => {
  model.formData.reviewAttachment = res.file;
};

const changeRadio = async res => {
  const index = radioList.findIndex(item => item.value === res + "");
  model.formData.reviewCategoryCode = res + "";
  model.formData.reviewCategoryName = radioList[index].name;
};

const initInfo = () => {
  isExpert.value =
    flowFormArray[flowType]["pending"][nodeId]?.isExpert || false;
  formList.value = flowFormArray[flowType]["pending"][nodeId]?.formList || [];
  model.formData.expertRvwId = projectInfo.value.id;
  model.formData.id = projectInfo.value.id;
  if (projectInfo.value.reviewCommentsCode) {
    model.formData.reviewCommentsCode = {
      dicCode: projectInfo.value.reviewCommentsCode || "",
      dicValue: projectInfo.value.reviewCommentsName || ""
    };
  }
  model.formData.reviewCommentsName = projectInfo.value.reviewCommentsName;
  model.formData.reviewComments = projectInfo.value.reviewComments;
  model.formData.ecoAccurate = projectInfo.value.ecoAccurate;
  model.formData.ecoCompliance = projectInfo.value.ecoCompliance;
  model.formData.ecoRational = projectInfo.value.ecoRational;
  model.formData.tcnAdvance = projectInfo.value.tcnAdvance;
  model.formData.tcnInnovation = projectInfo.value.tcnInnovation;
  model.formData.tcnJbzx = projectInfo.value.tcnJbzx;
  model.formData.ext1 = projectInfo.value.ext1;
  model.formData.ext2 = projectInfo.value.ext2;
  model.formData.ext3 = projectInfo.value.ext3;
  model.formData.ext4 = projectInfo.value.ext4;
  model.formData.ext5 = projectInfo.value.ext5;
  model.formData.ext6 = projectInfo.value.ext6;
  model.formData.remark = projectInfo.value.remark;
  model.formData.reviewCategoryCode = projectInfo.value.reviewCategoryCode;
  model.formData.reviewCategoryName = projectInfo.value.reviewCategoryName;
  model.formData.reviewTemplateAttachment = projectInfo.value
    .reviewTemplateAttachment
    ? projectInfo.value.reviewTemplateAttachment
    : [];
  model.formData.reviewTemplateAttachmentArr = projectInfo.value
    ?.reviewTemplateAttachmentArr
    ? projectInfo.value?.reviewTemplateAttachmentArr
    : [];
  model.formData.reviewAttachment = projectInfo.value.reviewAttachment;
  if (isExpert.value) {
    //是否专家评审
    const userId = userInfo.userId;
    const userIndex = projectInfo.value.rvwUserList?.findIndex(
      item => item.userId == userId
    );
    conclusionList.value =
      flowFormArray[flowType]["pending"][nodeId]["conclusion"];
    reviewTitle.value =
      flowFormArray[flowType]["pending"][nodeId]["review"].label;
    if (projectInfo.value?.rvwUserList?.length) {
      model.formData.expertRvwId =
        projectInfo.value.rvwUserList[userIndex]?.expertRvwId;
      if (projectInfo.value.rvwUserList[userIndex]?.expertCategoryCode == "1") {
        //技术专家
        if (
          projectInfo.value.reviewStageCode == 2 ||
          projectInfo.value.reviewStageCode == 4
        ) {
          reviewList.value =
            flowFormArray[flowType]["pending"][nodeId]["review"][
              projectInfo.value.reviewStageCode
            ]["technology"];
        } else {
          reviewList.value =
            flowFormArray[flowType]["pending"][nodeId]["review"]["technology"];
        }
      } else if (
        projectInfo.value.rvwUserList[userIndex]?.expertCategoryCode == "2"
      ) {
        //经济专家
        reviewList.value =
          flowFormArray[flowType]["pending"][nodeId]["review"]["economy"];
      }
    }
  }
};

watch(
  () => props.projectInfo,
  newVal => {
    projectInfo.value = newVal;
    initInfo();
  },
  { deep: true }
);

defineExpose({
  validate,
  model
});
</script>

<style lang="scss" scoped>
.empt-content {
  height: calc(100vh - 200px);
  width: 100%;
}

.card-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-box-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .header-btn {
    font-size: 14px;
    cursor: pointer;
  }
}
.mg-row {
  margin-bottom: 20px;
}
</style>
